<template>
  <div class="box">
    <h1>查看订单</h1>
    <div>
      <div class="detail_cotent">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="订单号">
            <el-input placeholder="订单号" v-model="form.orderNo"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input
              placeholder="创建时间"
              v-model="form.createTime"
            ></el-input>
          </el-form-item>
          <el-form-item label="收件人">
            <!-- <el-input
              v-model="
                form.shippingVo.receiverName +
                ',' +
                form.shippingVo.receiverProvince +
                form.shippingVo.receiverCity +
                ',' +
                form.shippingVo.receiverAddress +
                ',' +
                form.shippingVo.receiverMobile
              "
            ></el-input> -->
          </el-form-item>
          <el-form-item label="订单状态">
            <!-- stock -->
            <el-input
              class="inp"
              placeholder="订单状态"
              v-model="form.statusDesc"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="支付方式">
            <!-- stock -->
            <el-input
              class="inp"
              placeholder="支付方式"
              v-model="form.paymentTypeDesc"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="订单金额">
            <!-- stock -->
            <!-- <el-input
              class="inp"
              placeholder="订单金额"
              v-model="'￥' + form.payment"
            >
            </el-input> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-table :data="container1" border style="width: 100%">
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <img
                :src="form.imageHost + scope.row.productImage"
                alt=""
              /> </template
          ></el-table-column>

          <el-table-column
            prop="productName"
            label="商品信息"
          ></el-table-column>
          <el-table-column
            prop="currentUnitPrice"
            label="单价"
          ></el-table-column>
          <el-table-column prop="createTime" label="数量"></el-table-column>
          <el-table-column prop="totalPrice" label="合计"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { shanglist1 } from "../../../http/http";
export default {
  data() {
    return {
      form: [],
      container1: [],
      orderItemVoList1: [{}],
    };
  },
  mounted() {
    shanglist1(this.$route.query.id).then((res) => {
      //console.log(res.data.data);
      console.log(res);
      this.form = res.data.data;
      //   console.log(this.container1);
      this.container1 = res.data.data.orderItemVoList;
      //this.form=res.data.list
      console.log(this.typemain)
    });
  },
};
</script>

<style>
.box {
  width: 80%;
  margin-left: 20%;
}
.card {
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.shops {
  width: 500px;
  height: 20px;
  background-color: white;
  color: #333333;
}
.cards {
  width: 100%;
  height: 100px;
  border: 1px solid grey;
}
img{
  width: 100px;
  height: 100px;
}
</style>